<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态添加表格内容</title>
<style>
    /* 创建一个CSS类来设置宽度 */
    .email-header {
      min-width: 500px;
    }
  </style>
<script>
function addContentToTable() {
  // 获取父元素div下的两个子元素input
  var nameInput = document.getElementById('nameInput');
  var emailInput = document.getElementById('emailInput');

  // 获取table元素
  var table = document.getElementById('contentTable');

  // 获取用户输入的姓名和邮箱
  var name = nameInput.value;
  var email = emailInput.value;

  // 判断用户输入是否为空
  if (name.trim() === '' || email.trim() === '') {
    alert('请输入姓名和邮箱！');
    return;
  }

  // 创建新的表格行元素
  var newRow = document.createElement('tr');

  // 创建两个新的表格数据元素
  var nameCell = document.createElement('td');
  var emailCell = document.createElement('td');

  // 创建文本节点并添加到相应的数据单元格中
  var nameTextNode = document.createTextNode(name);
  var emailTextNode = document.createTextNode(email);

  nameCell.appendChild(nameTextNode);
  emailCell.appendChild(emailTextNode);

  // 将数据单元格添加到新的行中
  newRow.appendChild(nameCell);
  newRow.appendChild(emailCell);

  // 将新的行添加到表格中
  table.appendChild(newRow);

  // 清空输入框
  nameInput.value = '';
  emailInput.value = '';
}
</script>
</head>
<body>

<div>
  <label for="nameInput">姓名:</label>
  <input type="text" id="nameInput" placeholder="请输入姓名:">
</div>
<div></div>
  <label for="emailInput">邮箱:</label>
  <input type="email" id="emailInput" placeholder="请输入邮箱:">
</div>
<div>
  <button onclick="addContentToTable()">添加</button>
</div>

<table id="contentTable" border="1">
  <thead>
    <br>
      <th>姓名</th> 
      <th class="email-header">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容将在这里动态添加 -->
  </tbody>
</table>

</body>
</html>